<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-05-17 11:24:59
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-08-16 16:24:10
 * @FilePath: \code\ctp-static-portal-front\src\views\newsList\components\selector.vue
 * @Description: 
-->
<template>
  <div class="selector-wrap">
    <div class="btns">
      <div
        class="selector-btn hand"
        :class="{ current: selected == 'new' }"
        @click="changeTab('new')"
        >{{ i18n('section.column.flag.newest') }}</div
      >
      <div
        class="selector-btn hand"
        :class="{ current: selected == 'focus' }"
        @click="changeTab('focus')"
        >{{ i18n('section.column.flag.focus') }}</div
      >
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Selector',
    props: {
      selected: { type: String },
      changeTab: { type: Function }
    },
    methods: {
      i18n(code) {
        return $.i18n(code);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .selector-wrap {
    width: 100%;
    height: 48px;
    line-height: 44px;
    text-align: left;
  }

  .current {
    color: #333;
    text-align: center;
    border-bottom: 3px solid #ff8c3d;
  }

  .btns {
    width: 1088px;
    height: 50px;
    margin: 0 auto;
  }

  .selector-btn {
    display: inline-block;
    float: left;
    width: 40px;
    margin-right: 30px;
    text-align: center;
  }

  .hand:hover {
    cursor: pointer;
  }
</style>
